<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div class="root">
        姓:<input type="text" v-model="firstName"/><br/>
        名:<input type="text" v-model="lastName"/><br/>
        姓名:<span>{{fullName}}</span><br/>
    </div>
</body>

<script type="text/javascript">
    // import Vue from 'vue'

    new Vue({
      el:'.root',
      data:{
          firstName:'张',
          lastName:'三'
      },
      computed:{
        fullName: {
          /**
           * get有什么作用，当有人读取fullname时,get就会被调用,且返回值就作为fullname的值
           * get什么时候调用:
           *  1.初次读取fullname时,之后会读取缓存
           *  2.所依赖的数据发生变化时
           * @returns {string}
           */
          get(){
            //这里的this就是当前的Vue对象
            return this.firstName + '-' + this.lastName
          },
          /**
           * 当fullname被修改时,会被调用
           */
          set(){
            //处理逻辑
          }
        }
      }
    })
</script>
</html>
